import React from 'react'
import './ZxMenuSet.css'
import { ImagePicker} from 'antd-mobile';
import * as api from '../../utils/Zxapi'
import axios from 'axios'

class ZxMenuSet  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            files: [],
            uploadpath: 'pic' ,  //上传路径文件夹名  根据自己实际情况来,
            /* 图片下面的input框输入的值 */
            menuName:'',
            menuPrice:'',
            inventory:'',
            describe:'',
        };
    }
    componentDidMount() {
        // this.autoFocusInst.focus();
    }

    /* 点击箭头 ==返回店铺首页 */
    backMy(){
        this.props.history.push('/Home/GoodsZ')
     }
    /*图片的双向绑定  */
    onChange = (files) => {
        // console.log(files);
        this.setState({
            files,
      });
   }
   /* 点击上传之后将图片上传至后台 */
    upload = () => {
         let formData = new FormData();
        for (let i = 0; i < this.state.files.length; i++) {   
            let file = this.state.files[i].file;
            formData.append('goods_logo_file', file);
        }
        formData.append('goods_name',this.state.menuName)   // 这里根据自己项目后台实际情况定==根据后台要的字段
        formData.append('goods_price',this.state.menuPrice)  
        formData.append('goods_num',this.state.inventory)  
        formData.append('goods_des',this.state.describe)  
        // var url = '***这里改写为你的上传图片的接口地址***';
        // var url = api.GET_STOPPHONE;
        // var url = 'http://172.16.10.144:8856/olife/goods/addGoods';
        // axios.post(url, formData, {
        //     // headers: {
        //     //     'Content-Type': 'multipart/form-data'
        //     // }

        // }).then((json) => {
        // console.log(json); 
        // }).catch();
        axios({
            url:api.GET_STOPPHONE,
            method:'post',
            data:formData
        }).then(data=>{
            console.log(data);
        })

    }


     /* 表单里面的input框的提交 在这里获得输入的input框的值 */
     hadleSubmit(event){
        // 阻止onsubmit的默认提交行为
        event.preventDefault();
        this.upload()
        console.log(12345);
        // 提交时，拿到最新的输入数据
        // console.log(this.state.menuName)
        // console.log(this.state.menuPrice)
        // console.log(this.state.inventory)
        // console.log(this.state.describe)
    }
    menuNameChange(event){
        // 当输入数据发生变化时，更新state中的数据
        this.setState({
            menuName:event.target.value
        })
    }
    menuPriceChange(event){
        this.setState({
            menuPrice:event.target.value
        })
    }
    inventoryChange(event){
        this.setState({  
            inventory:event.target.value
        })
    }
    describeChange(event){
        this.setState({
            describe:event.target.value
        })
    }
    render(){
        /* 问题：这里是子组件；这里需要点击跳转，传递父组件的值，我这里传的是一个对象；在没有点击跳转的时候，直接到子页面会报错 */
        /* 设置初始值 */
       /*  console.log(this.props.location.state) */
        let myInit={}
        console.log(this.props);
        if(this.props.location.state){
           myInit=this.props.location.state.myAdd.MenuTitle
        }else{
            myInit='添加菜品'
        }
        // let {MenuId,MenuTitle}=this.props.location.state.myAdd
        // console.log(MenuTitle)
        return(
            <div className='MenuBigBox'>
                <span className='iconfont icon-fanhuijian1' onClick={this.backMy.bind(this)}></span>
                <div className='headerSet'>
                    <h3>{myInit}</h3>
                    <button className='saveBtn'>保存</button>
                </div>
                {/* 添加图片的BOX */}
               <div className='addImg'>
                    <ImagePicker  files={this.state.files} onChange={this.onChange}
                            selectable={this.state.files.length < 3}  // 设置最大可上传图片数量为3 根据自己需求调整。
                            multiple={false}
                     />
               </div>
               <div>
                    {/* 如果没有onSubmit，则会默认提交方式，我们通过设置onSubmit来设置提交方式 */}
                   <form action="" className='formName' onSubmit={e=>this.hadleSubmit(e)}>
                        <label htmlFor="menuName" className='labelName'>菜名:
                        <input type="text"  name="" id="menuName" className='inputSet'
                        // 这个方法是当输入一旦发生改变，便会触发此方法（方法内部设置更新state数据）
                        onChange={e=>this.menuNameChange(e)}
                        //再将state中的数据传递给输入框value值
                        value={this.state.menuName}
                        />
                        </label>
                        <label htmlFor="menuPrice" className='labelName'>单价:
                        <input type="text" name=""  id="menuPrice" className='inputSet'
                        onChange={e=>this.menuPriceChange(e)}
                        value={this.state.menuPrice}/>
                        </label>
                        <label htmlFor="inventory" className='labelName'>库存:
                        <input type="text" name=""  id="inventory" className='inputSet'
                        onChange={e=>this.inventoryChange(e)}
                        value={this.state.inventory}
                        /></label>
                        <label htmlFor="describe" className='labelName'>描述:
                        <input type="textarea" name="" id="describe" className='inputSet'
                        onChange={e=>this.describeChange(e)}
                        value={this.state.describe}
                        /></label>
                        <input type="submit" value="提交" className='submitBtn'/>
                        {/* <button >上传</button> */}
                   </form>
               </div>
            </div>
        )
    }
}
export default ZxMenuSet 